
<template>
  <div class="container">
    <!-- 第一行 -->
    <el-row>
      <el-col :span="6">
        【题型】:{{ formatter(sonDate.questionType) }}
      </el-col>
      <el-col :span="6">
        【编号】:{{ sonDate.id }}
      </el-col>
      <el-col :span="6">

        【难度】:{{ formatterTwo(sonDate.difficulty) }}
      </el-col>
      <el-col :span="6">
        【标签】:{{ sonDate.tags }}
      </el-col>
    </el-row>
    <!-- 第二行 -->
    <el-row class="twoRow">
      <el-col :span="6">
        【学科】:{{ sonDate.subjectName }}
      </el-col>
      <el-col :span="6">
        【目录】:{{ sonDate.directoryName }}
      </el-col>
      <el-col :span="6">
        【方向】:{{ sonDate.direction }}
      </el-col>
    </el-row>
    <!-- 第一条横线 -->
    <div class="oneline boxCss" />
    <!-- 题干 -->
    <el-row class="boxCss">
      <el-col :span="20">
        【题干】:
      </el-col>
    </el-row>

    <el-row class="boxCss">
      <el-col :span="20" v-html="sonDate.question" />
    </el-row>
    <!-- 单选或多选行 -->
    <el-row>
      <el-col :span="20" class="boxCss">
        {{ formatter(sonDate.questionType) }} 选项：(以下选中的选项为正确答案)
      </el-col>
    </el-row>
    <!-- 单选组 -->
    <div v-if="buttonStatus==='1'">
      <el-row class="boxCss">
        <el-col v-for="item in sonDate.options" :key="item.id" :span="24">
          <el-radio v-model="radio" :label="item.isRight" @change="radio=1">{{ item.title }}</el-radio>
        </el-col>
      </el-row>

    </div>
    <!-- 多选组 -->
    <div v-if="buttonStatus==='2'">
      <el-row class="boxCss">
        <el-col v-for="item in sonDate.options" :key="item.id" :span="24">
          <el-checkbox v-model="checked" :label="item.isRight" @change="checked=[1]">{{ item.title }}</el-checkbox>
        </el-col>
      </el-row>
    </div>
    <!-- 分割线 -->
    <div class="oneline boxCss" />
    <!-- 参考答案 -->
    <div class="boxCss">
      <span>【参考答案】：</span>
      <span>
        <el-button type="danger" @click="videoAnswer">视频答案预览</el-button>
      </span>
      <div v-if="videoShow">
        <video :src="sonDate.videoURL" autoplay controls="controls" width="50%" height="50%" />
      </div>
    </div>
    <!-- 分割线 -->
    <div class="oneline boxCss" />
    <!-- 答案解析 -->
    <div class="boxCss">
      <span>【答案解析】：</span>
      <span v-html="sonDate.answer" />
    </div>
    <!-- 分割线 -->
    <div class="oneline boxCss" />
    <!-- 题目备注 -->
    <div class="boxCss">
      <span>【题目备注】：</span>
      <span>{{ sonDate.remarks }}</span>
    </div>
    <!-- 关闭按钮 -->
    <el-row style="text-align:right">
      <el-col :span="24">
        <el-button type="primary" @click="$emit('closeBox')">关闭</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { questionType, difficulty } from '@/api/hmmm/constants.js'
export default {
  name: 'QuestionsPreview',

  props: {
    sonDate: {
      type: Object,
      required: true
    },
    buttonStatus: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      radio: 1, // 单选
      checked: [1], // 多选框状态  sonDate 通过父组件中的接口调用异步获取的
      videoShow: false // 视频显示与隐藏
    }
  },

  methods: {
    videoAnswer() {
      this.videoShow = true
    },
    // 多选

    // 试题类型
    formatter(date) {
      const obj = questionType.find(item => item.value === Number(date))
      return Object.assign({}, obj).label
    },
    // 难易程度
    formatterTwo(date) {
      const obj = difficulty.find(item => item.value === Number(date))
      return Object.assign({}, obj).label
    }
    // 学科

  }
}
</script>
<style lang="scss" scoped>
.oneline{
  height: 1px;
  background-color: #ccc;
  width: 100%;

}
.boxCss{
    margin-bottom: 15px;
}
.twoRow{
  margin: 10px 0px;
}
.musicBox{
  margin-top: 15px;
}
</style>
